<template>
  <div>
    <!-- 头部固定栏目 -->
    <header>
      <div class="left">
        <span>&lt;</span>
        <span>美团优选</span>
      </div>
      <div class="right">
        自提点:
        <span>立人科技园</span>
        <span>&gt;</span>
      </div>
    </header>

    <!-- 头部粘性定位搜索框 -->
    <div class="seek">
      <input type="text" placeholder="搜索" />
    </div>
    <div class="pledge">
      <b>便宜有好货</b>
      <span>品质保障·极速退款·次日自提·自制规则</span>
    </div>
    <div class="nav">
      <ul>
        <li
          v-for="(v, i) in arr"
          :key="i"
          :class="{ active: i === current }"
          @click="change(i)"
        >
          <span>{{ v.name }}</span>
        </li>
      </ul>
    </div>
    <div class="nav2">
      <ul>
        <li>
          <img src="imgjj/nav1.jpg" />
          <p>1.99元特卖</p>
        </li>
        <li>
          <img src="imgjj/nav2.jpg" />
          <p>邀新团拼</p>
        </li>
        <li>
          <img src="imgjj/nav3.jpg" />
          <p>邀请赚钱</p>
        </li>
        <li>
          <img src="imgjj/nav4.jpg" />
          <p>0元零鸡蛋</p>
        </li>
        <li>
          <img src="imgjj/nav5.jpg" />
          <p>签到领钱</p>
        </li>
        <li>
          <img src="imgjj/nav6.jpg" />
          <p>天天拿红包</p>
        </li>
      </ul>
    </div>

    <div class="list1">
      <div>
        <b>限时秒杀</b>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
        <span class="sp">128个商品即将抢光&gt;</span>
      </div>
      <!-- 随机商品列表1 -->
      <ul>
        <li v-for="(p, j) in arr1" :key="j">
          <img :src="p.imgSrc">
          <p>￥{{ p.Price }}</p>
        </li>
      </ul>
    </div>
    
     <div class="list1">
      <div>
        <b>特价菜场</b>
        <div>优惠放心  &nbsp;快来选购</div>
        <span class="sp">查看全部&gt;</span>
      </div>
      <!-- 随机商品列表1 -->
      <ul>
        <li v-for="(q, z) in arr2" :key="z">
          <img :src="q.imgSrc">
          <p>￥{{ q.Price }}</p>
        </li>
      </ul>
    </div>

    <!-- 商品列表 -->
    <ul class="shopList">
      <li v-for="(x,n) in arr3" :key="n">
        <img :src="x.imgSrc">
        <div>
          <h3>{{x.name}}</h3>
          <van-progress :percentage="10" stroke-width="0.1" />
          <p>附近{{x.num}}人已下单</p>
          <p>{{x.p}}</p>
          <span>￥{{x.Price}}</span>
        </div>
      </li>
    </ul>
    
    <!-- 优惠券单元格 -->
<van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"/>
<!-- 优惠券列表 -->
<van-popup
  v-model="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;">
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"/>
</van-popup>
    <!-- 底部导航 -->
    <optimalBar/>
    <!-- 占位 -->
    <div class="zhan">

    </div>
  </div>
</template>




<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
};

export default {
  data() {
    return {
       chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      arr: [
        { name: "热卖" },
        { name: "超值购" },
        { name: "蔬菜" },
        { name: "水果" },
        { name: "酒饮" },
        { name: "粮油" },
        { name: "肉禽蛋" },
        { name: "零食" },
        { name: "纸品清洁" },
        { name: "速冻食品" },
        { name: "百货" },
        { name: "乳饮" },
        { name: "个护" },
        { name: "海鲜" },
        { name: "家纺服饰" },
        { name: "数码家电" },
        { name: "花卉" },
        { name: "母婴玩具" },
        { name: "早餐" },
        { name: "平价菜场" },
        { name: "箱装量贩" },
        { name: "每日上新" },
      ],
      arr1:[
        {imgSrc:"imgjj/l1.jpg",Price:"15.89"},
        {imgSrc:"imgjj/l2.jpg",Price:"1.99"},
        {imgSrc:"imgjj/l3.jpg",Price:"5.99"},
        {imgSrc:"imgjj/l4.jpg",Price:"8.5"},
      ],
      arr2:[
        {imgSrc:"imgjj/ll1.jpg",Price:"1.97"},
        {imgSrc:"imgjj/ll2.jpg",Price:"1.25"},
        {imgSrc:"imgjj/ll3.jpg",Price:"1.59"},
        {imgSrc:"imgjj/ll4.jpg",Price:"1.52"},
      ],
       arr3:[
        { imgSrc:"imgjj/list1.jpg",
          name:"【限量秒杀】涪陵特产涪陵榨菜50g/包",
          num:3738,
          p:"限量热卖",
          Price:"0.39"
        },
       { imgSrc:"imgjj/list2.jpg",
          name:"波力海苔1.5g/袋",
          num:3738,
          p:"限量热卖",
          Price:"1.39"
        },
       { imgSrc:"imgjj/list3.jpg",
          name:"【限量秒杀】涪陵特产涪陵榨菜50g/包",
          num:3738,
          p:"限量热卖",
          Price:"0.39"
        },
       { imgSrc:"imgjj/list2.jpg",
          name:"波力海苔1.5g/袋",
          num:3738,
          p:"限量热卖",
          Price:"1.39"
        },
       
      ],
      current: 0,
    };
  },

  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange() {
      this.coupons.push(coupon);
    },
    change(i) {
      this.current = i;
      this.span.style.borderBottom="#f4d048 solid 0.03rem"
      this.span.style.fontWeight = "bold";
    },
  },
};
</script>

<style scoped>
/* 头部固定栏目 */
header {
  width: 100%;
  height: 0.78rem;
  background-color: #f7d247;
}
header span {
  padding: 0.02rem;
}
header .right,
header .left {
  font-weight: bold;
  margin-top: 0.5rem;
  overflow: hidden;
}
header .left {
  font-size: 0.2rem;
  float: left;
  margin-top: 0.46rem;
}
header .right {
  font-size: 0.14rem;
  float: right;
}

/* 头部粘性定位搜索框 */
.seek {
  width: 100%;
  height: 0.4rem;
  background-color: #f7d247;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 99;
}
.seek input {
  width: 96%;
  height: 0.32rem;
  outline: none;
  margin: auto;
  border: none;
  text-align: center;
  border-radius: 0.16rem;
}

.pledge {
  width: 100%;
  height: 0.34rem;
  width: 100%;
  border-bottom: solid 0.06rem #f0f1f1;
  color: #9b9b9b;
  font-size: 0.12rem;
}
.pledge b {
  font-size: 0.14rem;
  color: #666666;
  line-height: 0.34rem;
  margin: 0 0.12rem;
}
.pledge span {
  font-size: 0.12rem;
  color: #9a9a9a;
  font-weight: bold;
  margin: 0 0.12rem;
  line-height: 0.34rem;
  float: right;
}
/* 分类导航栏目 */
.nav {
  /* width: 100%; */
  height: 0.42rem;
  overflow: auto;
  border-bottom: #f8f8f8 0.02rem solid;
  position: sticky;
  top: 0.4rem;
  background-color: #ffffff;
  z-index:99 ;
}
.nav ul {
  display: flex;
  overflow: auto;
  width: 9.8rem;  
}
.nav li {
  height: 0.42rem;
  padding: 0 0.0534rem;
  justify-content: space-between;
}
.nav li span {
  display: block;
  height: 0.39rem;
  line-height: 0.42rem;
  border: none;
  border-bottom: #f4d048 solid 0.03rem;
}
/* .nav li:active{
font-weight: bold;
} */
.nav li:nth-child(2) {
  font-weight: bold;
  color: #e95308;
}
/* 狗屎零鸡蛋 */
.nav2 {
  height: 0.84rem;
  width: 100%;
  border-bottom: solid 0.06rem #f0f1f1;
  color: #9b9b9b;
  font-size: 0.12rem;
  display: flex;
  align-content: center;
}

.nav2 img {
  width: 0.36rem;
  height: 0.36rem;
}
.nav2 ul {
  display: flex;
  overflow-x: auto;
}
.nav2 ul li {
  margin: auto 0.08rem;
  flex-shrink: 0;
  text-align: center;
}
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
.list1 {
  height: 1.4rem;
  width: 100%;
  border-bottom: solid 0.06rem #f0f1f1;
  color: #9b9b9b;
  font-size: 0.12rem;
  position: relative;
}
.list1 div .sp,
.list1 div b {
  line-height: 0.24rem;
  float: right;
  font-size: 0.12rem;
  color: #c4c4c4;
  margin: -0.02rem 0.12rem;
}
.list1 div b {
  font-size: 0.16rem;
  float: left;
  color: #151515;
}
.list1 div .sp{
  position: absolute;
  top: 0;
  right: 0;
}
.list1 ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0.1rem 0;
}
.list1 ul img{
  width: 0.8rem;
  height: 0.8rem;
}
.list1 ul p{
  color: #db2112;
  text-align: center;
  font-size: 0.14rem;
  font-weight: bold;
}


/* 商品列表 */
.shopList img{
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem;
}
.shopList li{
  display: flex;
}
.shopList div{
  height: 1.5rem;
  padding: 0.1rem 0;
  width: 2.05rem;
  border-bottom: 0.02rem solid #f4f4f4;
  position: relative;
}
.shopList li div h3{
  font-size: 0.14rem;
  line-height: 0.2rem;
}
.shopList li div span{
   line-height: 0.3rem;
  font-size: 0.17rem;
  color: #d80a00;
  font-weight: bold;
  position: absolute;
  bottom: 0;
}
.shopList li div p{
  color: #adadad;
  font-size: 0.12rem;
}
.shopList li div p:nth-child(2){
  text-align: center;
  margin-top: 0.25rem;
}
.shopList li div p:nth-child(3){
  margin-top: 0.28rem;
}
.van-progress{
  margin-top: 0.1rem;
}
.van-cell{
  background-color: #fef9e2;
  position: fixed;
  bottom: 0.75rem;
}
.van-progress__portion,.van-progress__pivot{
  background-color: #ee0a24;
}
.zhan{
  height: 0.11rem;
  width: 100%;
}
</style>